<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="请选择统计类型">
        <el-select v-model="searchObj.type" placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"></el-option>
          <el-option label="学员注册数统计" value="register_num"></el-option>
          <el-option label="课程播放数统计" value="video_view_num"></el-option>
          <el-option label="每日课程数统计" value="course_num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
        >
        </el-date-picker>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :loading="btnLoading" @click="showChart"
          >查询</el-button
        >
        <!-- <el-button @click="resetData()">清空</el-button> -->
      </el-form-item>
    </el-form>
    <div id="main" style="width: 800px; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import statisticsApi from "@/api/statistics";
export default {
  data() {
    return {
      searchObj: {},
      xData: [], //x轴数据
      yData: [], //y轴数据
      btnDisable:false,
      btnLoading:false
    };
  },
  methods: {
    showChart() {
      // 获取查询参数，调用统计API，获取数据
      // console.log(this.searchObj)
      this.btnLoading=true
      statisticsApi.getData(this.searchObj).then((res) => {
        // console.log(res)
        this.xData = res.data.xData;
        this.yData = res.data.yData;
  this.btnLoading=false
        // 渲染折线图
        this.setChart();
      });
    },
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.yData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

